<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item :label="customer.customerName" prop="customerName">
          <el-input
            v-model="filterForm.customerName"
            :placeholder="customer.enterCustomerName"
            clearable
            @keyup.enter.native="getList('filter')"
          />
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ operateType.query }}</el-button
          >
          <el-button @click="cancelForm">{{ operateType.clear }}</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作栏 -->
      <div class="base-content-operate">
        <el-button
          v-rights="'Add'"
          icon="el-icon-plus"
          type="primary"
          @click="addCustomer"
          >{{ operateType.add }}</el-button
        >
        <!-- <el-button icon="el-icon-document-copy" type="primary">导出</el-button>
        <el-button icon="el-icon-document-copy" type="primary">导入</el-button> -->
      </div>
      <!--列表-->
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="calc(100% - 150px)"
      >
        <el-table-column
          align="center"
          :label="customer.serialNumber"
          width="50"
        >
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="num" :label="customer.customerNumber" />
        <el-table-column prop="customerName" :label="customer.customerName" />
        <el-table-column prop="address" :label="customer.customerAddress" />
        <el-table-column prop="nature" :label="customer.customerNature" />
        <el-table-column
          prop="registrationNum"
          :label="customer.unitRegistrationNumber"
        />
        <el-table-column :label="operateType.action" width="200">
          <template slot-scope="{ row }">
            <div class="base-table-operation">
              <el-link
                v-rights="'Edit'"
                type="primary"
                @click="setCustomerDectionItemPrice(row)"
                >{{ customer.setCustomerPrice }}</el-link
              >
              <el-link
                v-rights="'Edit'"
                type="primary"
                @click="editUnit(row)"
                >{{ operateType.edit }}</el-link
              >
              <el-link
                v-rights="'Delete'"
                type="danger"
                @click="delUnit(row)"
                >{{ operateType.delete }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <CustomerMessageDialog
      ref="CustomerMessageDialog"
      v-model="isShowDialog"
      :edit-id.sync="editId"
      @close="close"
    />
    <CustomerDetectionItemPriceDialog
      v-if="isShowPriceDialog"
      ref="CustomerDetectionItemPriceDialog"
      :is-show-dialog.sync="isShowPriceDialog"
      :edit-id.sync="editId"
      @close="closeCustomerDetectionItemPrice"
    />
  </div>
</template>

<script>
import { getToken } from "../../../utils/auth";
import { getList, deleteRecord } from "../../../api/SysBusiness/Customer.js";
import CustomerMessageDialog from "./CustomerMessageDialog.vue";
import CustomerDetectionItemPriceDialog from "./CustomerDetectionItemPriceDialog.vue";
export default {
  name: "CustomerList",
  components: {
    CustomerMessageDialog,
    CustomerDetectionItemPriceDialog,
  },
  data() {
    return {
      isShowPriceDialog: false,
      filterForm: {
        customerName: "",
      },
      token: { Authorization: getToken() },
      visible: false,
      editId: "",
      EditIsShowDialog: false,
      isShowDialog: false,
      tableLoad: false,
      loading: false,
      searchLoading: false,
      tableData: [],
      total: 0,
      pageCount: 0,
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    customer() {
      return this.$t("Customer") || {};
    },
  },
  created() {
    this.getList();
  },
  methods: {
    cancelForm() {
      this.$refs.filterForm.resetFields();
      this.getList("filter");
    },

    importError() {
      this.loading = false;
      this.$message.error(this.$t("Customer.serverError"));
    },
    uploading() {
      this.loading = true;
    },
    setCustomerDectionItemPrice(row) {
      this.editId = row.id;
      this.isShowPriceDialog = true;
    },
    editUnit(row) {
      this.editId = row.id;
      this.isShowDialog = true;
    },
    delUnit(row) {
      this.$confirm(
        this.$t("Customer.sureDeleteCustomer"),
        this.$t("Customer.deleteCustomer"),
        {
          type: "warning",
          confirmButtonText: this.$t("ModuleSysBusiness.OperateType.confirm"),
          okType: "danger",
          center: true,
          cancelButtonText: this.$t("ModuleSysBusiness.OperateType.cancel"),
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              deleteRecord({ Id: row.id }).then((res) => {
                instance.confirmButtonLoading = false;
                done();
                this.getList();
              });
            } else {
              instance.confirmButtonLoading = false;
              done();
            }
          },
        }
      ).catch();
    },
    close() {
      this.editId = "";
      this.$refs.CustomerMessageDialog.$refs.CustomerPerson.customerPersonData =
        [];
      this.getList();
    },
    closeCustomerDetectionItemPrice() {
      this.editId = "";
    },
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      if (flag) {
        this.pageInfo.pageIndex = 1;
      }
      getList({
        ...this.filterForm,
        ...this.pageInfo,
      })
        .then((res) => {
          // 分页序号连续
          for (let index = 0; index < res.data.dataList.length; index++) {
            res.data.dataList[index].index =
              (this.pageInfo.pageIndex - 1) * this.pageInfo.pageSize +
              index +
              1;
          }
          this.tableData = res.data.dataList;

          this.total = res.data.total;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },
    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
    // 新增客户信息
    addCustomer() {
      this.isShowDialog = true;
    },
  },
};
</script>
